<template>
  <div id="app">
    <h2>App: {{ msg }}--{{ msg2 }}</h2>
    <!-- 
      vue2: 
        v-model的本质是: 动态value属性, 自定义的input事件, 用子组件发送的数据更新当前组件的数据
        .sync的本质是: 自定义事件, 事件名: update:xxx, 用子组件发送的数据更新当前组件的数据
     -->
    <!-- <Child :xxx="msg2" @update:xxx="msg2=$event"/> -->
    <!-- <Child :value="msg" @input="msg=$event"/> -->
    <Child v-model="msg" :xxx.sync="msg2"/>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  name: 'App',
  components: {
    Child
  },

  data () {
    return {
      msg: 'abc',
      msg2: 'cba',
    }
  }
}
</script>

